<template>
  <view class="" :style="[scrollstyle]" >
    <scroll-view
      scroll-y="true"
      class="scroll-Y"
      :refresher-triggered="triggered"
      refresher-background="#f4f7f8"
      :refresher-threshold="100"
      @scrolltolower="onPulling"
      :refresher-enabled="false"
      @refresherrefresh="onRefresh"
      refresher-default-style="black"
    >
      <!-- {{ seardata }} -->
      <slot name="default" :list="list">
        {{ list }}
      </slot>
      <!-- {{ status }} -->
      <!-- <u-loadmore :status="status" /> -->
      <u-loadmore :status="status"></u-loadmore>
      <view class="" style="height: 2rpx"> </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    seardata: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    api: {
      typeof: Function,
      default: async () => {
        return () => [];
      },
    },
    cmax: {
      typeof: [Number, String],
      default: 10,
    },
    onPullingfalge: {
      typeof: Boolean,
      default: true,
    },
    customStyle: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      status: "loadmore",
      triggered: false,
      list: [],
    };
  },
  computed: {
    scrollstyle() {
      return {
        height: `calc(100vh - ${uni.$u.addUnit(
          uni.$u.getPx(uni.$u.props.navbar.height) +
            uni.$u.sys().statusBarHeight,
          "px"
        )})`,
        ...this.customStyle,
      };
    },
    reqdata() {
      let r = {
        ...this.seardata,
      };
      r.pageSize = 10;
      r.pageNo = Math.ceil(this.list.length / r.pageSize) + 1;
     
      return r;
    },
  },
  mounted() {
    if (this.onPullingfalge) {
      this.onPulling();
    }
  },
  methods: {
    async onPulling() {
      console.log("onPulling");
      if (this.status == "loading") {
        return;
      }
      this.status = "loading";
      await this.getdata();
    },
    async onRefresh(e) {
      // return;
      console.log("onRefresh");
      if (this.status == "loading") {
        return;
      }
      this.status = "loading";
      this.triggered = true;
      this.list = [];

      await this.getdata();
      this.triggered = false;
    },
    async getdata() {
      uni.showLoading();
      let reqdata = await this.api(this.reqdata);
      reqdata =
        reqdata?.data?.records ||
        reqdata?.data?.ipage?.records ||
        reqdata?.data?.list ||
        [];
      uni.hideLoading();
      this.list = this.list.concat(reqdata);

      this.status = reqdata.length >= this.reqdata.pageSize ? "more" : "noMore";

    },
  },
};
</script>

<style lang="scss">
.scroll-Y {
  height: 100%;
}

.carditem {
  background: #fff;
  margin: 30rpx;
  border-radius: 10rpx;

  .ddh {
    height: 100rpx;
    font-size: 30rpx;
    position: relative;
    padding: 0 30rpx;

    &::after {
      content: "";
      position: absolute;
      left: 30rpx;
      bottom: 0;
      height: 1rpx;
      background: #e5e5e5;
      right: 30rpx;
    }
  }

  .sj {
    height: 80rpx;
    font-size: 28rpx;
    position: relative;
    padding: 0 30rpx;

    &::after {
      content: "";
      position: absolute;
      left: 30rpx;
      bottom: 0;
      height: 1rpx;
      background: #e5e5e5;
      right: 30rpx;
    }
  }

  .je {
    height: 120rpx;
    justify-content: flex-end;
    padding: 0 30rpx;
    font-size: 24rpx;

    .text {
      font-size: 36rpx;
      font-weight: bold;
      color: #2093f5;
    }
  }
}
</style>
